import React, {PureComponent} from "react";
import {View, Image, StyleSheet, TouchableOpacity, Text, Dimensions, Button, Platform} from "react-native";
import Separator from "../Separator";

type Props = {
    callbackBoMing: Function,
    detail: Object,
    joinShop:Function,
    jumpShop:Function,
    // info: Object,

}

export default class DetailBuyBottom extends PureComponent < Props > {
    render() {
        let detail = this.props.detail

        return (
            <View>
                <Separator/>
                <View style={style.container}>
                    <View style={{flexDirection:'row',alignItems:'flex-end'}}>
                        <Text style={{color:'#db3843',marginRight:8}}>¥</Text>
                        <Text
                            style={{color:'rgb(219,56,67)',fontSize:30,marginBottom:-5,flexWrap:'wrap'}}>{detail.price}</Text>
                        {/*{this.renderIsBuys()}*/}
                        <View style={{flex:1}}/>
                        <TouchableOpacity onPress={()=>{this.props.jumpShop()}}>
                            <Image style={{width:22,height:22,marginBottom:5}}
                                   source={require('../../../res/img/shopcart_red.png')}/>
                        </TouchableOpacity>
                        {this.renderBottom()}
                    </View>
                </View>
            </View>

        )
    }


    // renderIsBuys() {
    //     // let info = this.props.info
    //     let detail = this.props.detail
    //
    //     if (detail.buy_num >= detail.totals) {
    //         return <View/>
    //     } else {
    //         return <Text style={{color:'rgba(0,0,0,0.5)',fontSize:12,fontWeight:'200',marginLeft:18}}>已有{detail.buy_num}人购买</Text>
    //     }
    // }
    renderBottom() {
        // let info = this.props.info
        let detail = this.props.detail

        if (detail.is_buy > 0) {
            return <View style={style.yi_bao_ming}>
                <Text style={{fontWeight:'bold',fontSize:16,color:'white'}}>已购买</Text>
            </View>
        } else if (detail.buy_num >= detail.totals) {
            return <View style={style.yi_bao_ming}>
                <Text style={{fontWeight:'bold',fontSize:16,color:'white'}}>已售罄</Text>
            </View>
        } else {
            return <View style={{flexDirection:'row',}}>
                <TouchableOpacity style={style.left_ban_bao_ming} onPress={()=>{this.props.joinShop()}}>
                    <Text style={{fontWeight:'bold',fontSize:16,color:'white'}}>加入购物车</Text>
                </TouchableOpacity>
                <TouchableOpacity style={style.ban_bao_ming} onPress={()=>{this.props.callbackBoMing()}}>
                    <Text style={{fontWeight:'bold',fontSize:16,color:'white'}}>立即购买</Text>
                </TouchableOpacity>
            </View>
        }
    }
}

const style = StyleSheet.create({

    container: {
        height: 62,
        backgroundColor: 'white',
        paddingTop: 11,
        paddingBottom: 11,
        paddingLeft: 12,
        paddingRight: 12,

    },
    bao_ming: {
        backgroundColor: 'rgb(219,56,67)',
        borderRadius: 20,
        width: 120,
        height: 40,
        marginLeft: 22,
        justifyContent: 'center',
        alignItems: 'center',
    },
    yi_bao_ming: {
        backgroundColor: '#cecece',
        borderRadius: 20,
        width: 120,
        height: 40,
        marginLeft: 22,
        justifyContent: 'center',
        alignItems: 'center',
    },
    ban_bao_ming: {
        backgroundColor: 'rgb(219,56,67)',
        borderBottomRightRadius: 20,
        borderTopRightRadius: 20,
        height: 40,
        paddingLeft: 17,
        paddingRight: 20,
        justifyContent: 'center',
        alignItems: 'center',
    },
    left_ban_bao_ming: {
        backgroundColor: '#E18039',
        borderBottomLeftRadius: 20,
        borderTopLeftRadius: 20,
        height: 40,
        marginLeft: 22,
        paddingLeft: 17,
        paddingRight: 6,
        alignItems: 'center',
        justifyContent: 'center',
    },
})